<template>
  <div class="container">
    <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <a class="nav-link" :class="routerPath.includes('/home')?'active':''" @click="handleClick('/home')">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="routerPath.includes('/high')?'active':''" @click="handleClick('/high')">高手攻略</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="routerPath.includes('/things')?'active':''" @click="handleClick('/things')">线下活动</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="routerPath.includes('/other') ?'active':''" @click="handleClick('/other')">个人主页</a>
        </li>
      </ul>
    </div>
</template>

<script>

export default {
  data(){
    return{
      routerPath:this.$route.path
    }
  },
  watch: {
    '$route.path': function(newPath) {
      this.routerPath = newPath;
    }
  },
  methods:{
    handleClick(path){
        this.$router.push(path)
        this.routerPath = path
    },
   
  }
}
</script>

<style scoped>
.container{
  background-color: #dbe2ef;
  border-radius: 4px;
}
 ul{
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

  height: 40px;
  line-height: 40px;

 }
 li a{
  font-size: larger;
  color: black;
  cursor: pointer;
 }
 .active{
  color: #3498db;
  border-bottom: 1px solid #3498db;
 }
</style>
